<template>
    <div class="nav-box">
        <div class="nav-bar" :style="[ styles ]">
            <template v-if="!text.s">
                <p v-if="text.d" :style="{ color: text.c, fontSize: text.f+'px',fontStyle: text.i ? 'italic' : '',textDecoration: text.u ? 'underline' : '',fontWeight: text.b ? 'bold' : ''  }">{{text.t}}</p>
                <p v-else>{{text.t}}</p>
            </template>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    props:{
        base:{
            type: Object
        },
        text:{
            type: Object
        },
    },
    data() {
        return {
            
        }
    },
    computed:{
		...mapState(['pageList','pageOnlyId']),
        styles(){
            let style = {}, base = this.base
            switch (base.bg) {
                case 1:
                    style.background = '#fff'
                    break;
                case 2:
                    style.background = 'none'
                    break;
                case 3:
                    style.background = base.bc
                    base.bt === 2 && (style.background = `${base.bc} url(${base.bi}) center center / cover no-repeat`)
                    break;
                default:
                    break;
            }
            return style
        }
    },
    methods: {
        
    },
}
</script>

<style lang="scss" scoped>
.nav-box{height: 44px;
    .nav-bar{position: absolute;left: 0;right: 0;top: 0;z-index: 2;height: 44px;background: #f6f6f6;display: flex;align-items: center;justify-content: center;color: #333;box-shadow: 0px 1px 5px 0px #c2c2c2;}
}
</style>

